<template>
  <m-modal
    v-model="visible"
    title="日志设置"
    class="v-log-setting"
    :width="528"
    cancelText=""
    okText="关闭"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="_content">
      <table border-collapse="collapse">
        <tr>
          <td class="_left-td">
            操作日志
          </td>
          <td>
            <a-switch v-model="openLog" checked-children="开" un-checked-children="关" @change="changeLog" />           
          </td>
        </tr>
        <tr>
          <td class="_left-td">
            步骤回放
          </td>
          <td>
            <a-switch v-model="openPlayback" checked-children="开" un-checked-children="关" @change="changePlayback" />      <span style="margin-left:10px">   (重启后生效)  </span>
          </td>
        </tr>
        <tr>
          <td class="_left-td">
            说明
          </td>
          <td>
            <div style="height: 90px; color: #000">
              <div>1. 打开操作日志，会记录您的操作。</div>
              <div>2. 打开步骤回放，会为您录制操作视频。并在程序发生错误时保存视频，以便排查错误原因，如果程序正常操作，视频不会保存。</div>
            </div>           
          </td>
        </tr>
      </table>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from "src/components/common/Portal.vue";
import Modal from "src/components/common/CustomModal";
import { storage } from "src/util/common";
import { storeKey } from "@/constants/constants";
import LocalFile from "@/util/localFile/index";

const com = {
  name: "comp-log-setting",
  components: {
    "m-modal": Modal,
  },
  props: {},
  data() {
    return {
      visible: false,
      openLog: storage.get('log'),
      openPlayback: storage.get('playback')
    };
  },
  created() {
    if (this.openLog === null) {
      storage.set('log', true);
      this.openLog = true;
    }
    if (this.openPlayback === null) {
      storage.set('playback', false);
      this.openPlayback = false;
    }
  },
  mounted() {
    this.visible = true;
  },
  methods: {
    handleOk(res) {
      this.visible = false;
      this.$emit("sure", res);
    },
    handleCancel(e) {
      this.visible = false;
      this.$emit("close", e);
    },

    changeLog(checked) {
      storage.set('log', checked);
    },

    changePlayback(checked) {
      storage.set('playback', checked);
      console.log({ checked });
      if (checked){
        if (app.eventsMatrix == undefined){
          console.log('重置eventsMatrix');
          app.eventsMatrix = [[]];
        }
        
      } else {
        app.eventsMatrix = undefined;
      }
      console.log(app.eventsMatrix);
    }

  },
};

export default com;
export const logSetting = new Portal(com);
export const portal = logSetting;
</script>
<style lang="scss" scoped>
.v-log-setting {
  ._content {
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td,th {
      border: 1px solid #E4E3E3;
      padding: 10px;
    }
    ._left-td {
        width: 100px;
    }
  }
  ._row {
    height: 40px;
    padding: 10px;
    &.interval {
      height: auto;
    
    }
    &:last-of-type {
      border-top: 1px solid #E4E3E3;
      border-top: 1px solid #E4E3E3;
    }
  }
}
</style>
